
.main {
    width: 100%;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(58, 57, 57);
    border-radius: 20px;
}

.outside {
    width: 90%;
    height: 85%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.rotas {
    width: 500px;
    height: 340px;
    transition: all .6s linear;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-5deg) rotateY(2deg);
    user-select: none;
}

.rotas > div {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(240, 240, 240);
    transform: scale(1.1);
}

.rotas > div div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(30, 30, 30, .65);
    transition: all .6s linear;
}

.rotas > div.sel div {
    background-color: rgba(30, 30, 30, 0);
}

.rotas > div:nth-of-type(1) {
    transform: translateZ(500px);
}

.rotas > div:nth-of-type(2) {
    transform: rotateY(-60deg) translateZ(500px);
}

.rotas > div:nth-of-type(3) {
    transform: rotateY(-120deg) translateZ(500px);
}

.rotas > div:nth-of-type(4) {
    transform: translateZ(-500px);
}

.rotas > div:nth-of-type(5) {
    transform: rotateY(120deg) translateZ(500px);
}

.rotas > div:nth-of-type(6) {
    transform: rotateY(60deg) translateZ(500px);
}

.rotas img {
    width: 100%;
    height: 100%;
}

.changeBtns {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.changeBtns > div {
    font-size: 20px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgb(170, 170, 170);
    border: solid 1px;
    cursor: pointer;
    user-select: none;
}